<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades">产品工时</i>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">

                <el-input v-model="query.name"  placeholder="请输入工序名称"  class="handle-input mr10" ></el-input>

                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button icon="el-icon-upload" @click="handleImport">导入</el-button>

                <div style="float:right">
                    设备节拍：
                    <el-input  v-model="query.TT"  placeholder="设备节拍" style="width: 100px " class="handle-input mr10" ></el-input>
                    <el-button align="left" type="primary" icon="el-icon-search" @click="updateTT">修改</el-button>

                </div>

            </div>

            <el-table
                    :data="tableData"
                    border
                    class="table"
                    id="out-table"
                    header-cell-class-name="table-header"
            >

                <el-table-column prop="id" width="55" align="center" label="序号"></el-table-column>
                <el-table-column prop="name" align="center" label="工序" ></el-table-column>
                <el-table-column
                        v-for="(item, index) in productList"
                        :key="index"
                        :label="item.productModel"
                        align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.timingSummary[item.productModel]}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作"  align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-folder-add"
                                @click="handleBomChild(scope.$index, scope.row)"
                        >添加</el-button>
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                        <el-button
                                type="text"
                                icon="el-icon-delete"
                                class="red"
                                @click="handleDelete(scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                        align="center"
                ></el-pagination>
            </div>

        </div>


        <el-dialog title="导入工时" :visible.sync="importVisible" width="30%">

            <el-upload
                    class="upload-demo"
                    accept=".xlsx"
                    ref="upload"
                    action="/api/procedure/importHour"
                    :headers="myHeaders"
                    :file-list="fileList"
                    :on-exceed="handleExceed"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :limit="1"
                    :auto-upload="false">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>

            <div  class="el-upload__tip" style="margin-bottom: -40px">只能上传xlsx文件,且原有工时列表将被修改</div>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="importVisible = false">取 消</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "man-hour",
        data(){
            return{
                query: {
                    name:'',
                    TT:"",
                    pageIndex: 1,
                    pageSize: 10
                },
                myHeaders: {Authorization: sessionStorage.getItem("token")},
                importVisible:false,
                fileList:{},
                pageTotal: 0,
                productList:[],
                tableData: [],

            }
        },
        created() {
            this.getProduct();
            this.findTT();
        },
        methods: {
            //更新设备节拍
            updateTT(){
                this.$confirm('确定修改设备节拍？', '提示', {
                    type: 'warning'
                }).then(()=>{
                    this.$axios.get("/api/procedure/updateTT").then(res=>{
                        if (res.data.code!=='200') {
                            this.$message.error(res.data.message);
                        }else {
                            this.findTT();
                            this.$message.success(res.data.message);
                        }
                    });
                });

            },

            //查询设备节拍
            findTT(){
                this.$axios.get("/api/procedure/findTT").then(res=>{
                    if (res.data.code!=='200') {
                        this.$message.error(res.data.message);
                    }else {
                        this.query.TT=res.data.data;
                    }
                });
            },
            //搜索
            search(){
                this.$axios.get('/api/procedure/search?name='+this.query.name).then(res=>{
                    if (res.data.code!=='200') {
                        this.$message.error(res.data.message);

                    }else {
                        console.log(res.data.data);
                        this.pageSplit(res.data.data);

                    }
                });
            },
            //获取产品
            getProduct() {
                this.$axios.get('/api/product/selectAll').then((res) => {
                    if (res.data.code !== "200") {
                        this.$message.error(res.data.message);
                    } else {
                        this.productList = res.data.data;
                        this.getData();
                    }
                })
            },
            //获取工时
            getData() {

                this.$axios.get('/api/procedure/selectAll').then(res=>{
                    if (res.data.code!=='200') {
                        this.$message.error(res.data.message);

                    }else {
                        this.pageSplit(res.data.data);
                    }
                });
            },

            //返回成功的钩子
            handleSuccess(response, file, fileList){

                this.$message.success("导入成功");
                this.$refs.upload.clearFiles();
                this.importVisible=false;
                this.getData();
            },
            //返回失败的钩子
            handleError(err, file, fileList){
                this.$message.error("导入失败");
                this.$refs.upload.clearFiles();
                this.importVisible=false;
                this.getData();
            },

            //选择两个文件时报错
            handleExceed(files, fileList) {
                this.$message.warning('请将已选择文件删除后，再重新选择文件');
            },
            //显示上传文件窗口
            handleImport(){
                this.importVisible=true
            },
            //提交上传文件
            submitUpload(){
                if(this.query.produceDate===''){
                    this.$message.warning("请选择生产计划时间")
                }else if (this.$refs.upload.uploadFiles.length===0) {
                    this.$message.warning("请选择要上传的文件")
                }else {
                    this.$refs.upload.submit();
                }
            },
            // 分页导航
            handlePageChange(val) {

                this.$set(this.query, 'pageIndex', val);
                console.log(this.query.pageIndex);
                this.getData();
            },
            //分页
            pageSplit(data){
                this.pageTotal=data.length;
                let start= (this.query.pageIndex-1)*this.query.pageSize;
                let end = this.query.pageIndex*this.query.pageSize<this.pageTotal?this.query.pageIndex*this.query.pageSize:this.pageTotal;
                this.tableData=[];
                for (let i=start;i<end;i++){
                    this.tableData[i-start]=data[i];
                }
            },
        },

    }
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-input {
        width: 200px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .mr10 {
        margin-right: 10px;
    }


</style>